<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>todoList</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      background-color: #CDCDCD;
      font-size: 16px;
    }

    header {
      height: 50px;
      line-height: 50px;
      background-color: rgba(47, 47, 47, 0.98);
    }

    @media screen and (min-width: 600px) {
      section {
        width: 600px;
        padding: 0 10px;
      }
    }

    @media screen and (max-width: 620px) {
      section {
        width: 96%;
        padding: 0 2%;
      }
    }

    section {
      margin: 0 auto;
    }

    #list {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    #list label {
      font-size: 24px;
      color: #ddd;
      width: 100px;
    }

    #setWork {
      width: 60%;
      height: 24px;
      padding-left: 10px;
      border-radius: 5px;
      border: 0;
      outline: none;
      box-shadow: 0 1px 0 rgb(255 255 255 / 24%), 0 1px 6px rgb(0 0 0 / 45%) inset;
    }

    i {
      font-style: normal;
      float: right;
      height: 20px;
      line-height: 20px;
      margin-top: 5px;
      margin-right: 5px;
      padding: 0 5px;
      border-radius: 50%;
      text-align: center;
      color: #666;
      background-color: #E6E6FA;
      font-size: 14px;
      vertical-align: middle;

    }

    ul {
      padding: 0;
      margin: 0;
    }

    ul li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      list-style: none;
      height: 32px;
      line-height: 32px;
      background-color: #fff;
      border-left: 5px solid #629A9C;
      border-radius: 3px;
      box-shadow: 0 1px 2px rgb(0 0 0 / 7%);
      margin-bottom: 10px;
    }

    p {
      flex: 1;
    }

    p input {
      width: 90%;
      line-height: 20px;
      padding-left: 8px;
      /* 穿透当前元素:我这种方式做挺重要的 */
      pointer-events: none;
      outline: none;

    }

    input[type=checkbox] {
      width: 22px;
      height: 22px;
      cursor: pointer;
      margin: 0 10px 0 15px;
    }

    span {
      width: 14px;
      height: 12px;
      line-height: 12px;
      border-radius: 50%;
      text-align: center;
      border: 6px double #fff;
      color: #fff;
      background-color: #CCC;
      cursor: pointer;
      font-size: 14px;
      margin-right: 5px;
    }

    .done li {
      opacity: .5;
      border-left: 5px solid #999;
    }

    i[v-cloak] {
      display: none;
    }

    footer {
      color: #666;
      font-size: 14px;
      text-align: center;
    }

    footer a {
      text-decoration: none;
      color: #999;
    }
  </style>
</head>

<body>
  <div id="app">
    <header>
      <section>
        <form action="#" id="list">
          <label for="setWork">ToDoList</label>
          <input type="text" id="setWork" placeholder="添加ToDo" @keyup.enter="add">
        </form>
      </section>
    </header>
    <section>
      <h2>正在进行<i v-cloak>{{doingList.length}}</i></h2>
      <ul class="doing">
        <li v-for="(val,index) in doingList" :key="'id' + val.id">
          <input type="checkbox" :checked="val.done" @click.prevent="remove(val.id)">
          <p @click.stop="edit(val.id,$event)">{{val.msg}}</p>
          <span @click="del(val.id)">-</span>
        </li>
      </ul>
      <h2>已经完成<i v-text="doneList.length"></i></h2>
      <ul class="done">
        <li v-for="(val,index) in doneList" :key="'id' + val.id">
          <input type="checkbox" :checked="val.done" @click.prevent="remove(val.id)">
          <p @click.stop="edit(val.id,$event)">{{val.msg}}</p>
          <span @click="del(val.id)">-</span>
        </li>
      </ul>
    </section>
    <footer>
      Copyright © 2014 todolist.cn <a href="#" @click="clear">clear</a>
    </footer>
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        list: [],
        focus: true
      },
      methods: {
        // 回车添加
        add(e) {
          msg = e.target.value.trim();
          if (msg) {
            this.list.push({ msg, done: false, id: this.list.length });
            let todo = JSON.parse(localStorage.getItem('todo'));
            todo.push({ msg, done: false, id: todo.length });
            localStorage.setItem('todo', JSON.stringify(todo));
            e.target.value = '';
          }
        },

        // 移动
        remove(id) {
          console.log(id);
          this.list[id].done = !this.list[id].done;
          let todo = JSON.parse(localStorage.getItem('todo'));
          todo[id].done = !todo[id].done;
          localStorage.setItem('todo', JSON.stringify(todo));
        },

        // 删除
        del(id) {
          this.list.splice(id, 1);
          let todo = JSON.parse(localStorage.getItem('todo'));
          todo.splice(id, 1);
          this.list.forEach((item, index) => {
            item.id = index;
          })
          todo.forEach((item, index) => {
            item.id = index;
          })
          localStorage.setItem('todo', JSON.stringify(todo));

        },
        // 编辑
        edit(id, e) {
          val = e.target.innerHTML;
          //添加其他事件
          e.target.innerHTML = '<input type="text" value=' + val + ' id="changeIpt" autofocus onfocus="this.select()">';
          // 让input重新获取一下焦点,再选中
          e.target.children[0].focus();
          changeIpt.onblur = this.edited;

        },
        edited() {
          let val = event.target.value;
          event.target.parentNode.innerHTML = val;
          event.target.remove();
        },
        // 清空
        clear() {
          this.list = [];
          localStorage.setItem('todo', '[]');
        }

      },

      computed: {
        // 未做任务
        doingList() {
          return this.list.filter((item, index) => {
            return !item.done
          })
        },
        // 已做任务
        doneList() {
          return this.list.filter(item => {
            return item.done
          })
        }
      },
      mounted() {
        this.$nextTick(() => {
          if (!localStorage.getItem('todo')) {
            localStorage.setItem('todo', '[]');
          }
          this.list = JSON.parse(localStorage.getItem('todo'));
        })
      }
    })
  </script>
</body>

</html>